<template>
        <div class="allOrderContainer">
            <div class="allOrderContent">
                <div class="back" @click="goBack"></div>
                <p class="title">我的订单</p>
                <div class="other"></div>
            </div>
            <div class="allSituation">
                <div class="allSituationContent">
                    <div class="situationContent" @click="changeStyle(1)">
                        <p class="contentTitle" :style="firstStyle?{'color':'#333333','transform':'scale(1.1)'}:{'color':'#999999','transform':'scale(1)'}">全部</p>
                        <div class="contentImg" :style="firstStyle?{'opacity':1}:{'opacity':0}"></div>
                    </div>
                    <div class="situationContent" @click="changeStyle(2)">
                        <p class="contentTitle" :style="secondStyle?{'color':'#333333','transform':'scale(1.1)'}:{'color':'#999999','transform':'scale(1)'}">待付款</p>
                        <div class="contentImg" :style="secondStyle?{'opacity':1}:{'opacity':0}"></div>
                    </div>
                    <div class="situationContent" @click="changeStyle(3)">
                        <p class="contentTitle" :style="thirdStyle?{'color':'#333333','transform':'scale(1.1)'}:{'color':'#999999','transform':'scale(1)'}">派送中</p>
                        <div class="contentImg" :style="thirdStyle?{'opacity':1}:{'opacity':0}"></div>
                    </div>
                    <div class="situationContent" @click="changeStyle(4)">
                        <p class="contentTitle" :style="fourthStyle?{'color':'#333333','transform':'scale(1.1)'}:{'color':'#999999','transform':'scale(1)'}">已完成</p>
                        <div class="contentImg" :style="fourthStyle?{'opacity':1}:{'opacity':0}"></div>
                    </div>
                    <div class="situationContent" @click="changeStyle(5)">
                        <p class="contentTitle" :style="fifthStyle?{'color':'#333333','transform':'scale(1.1)'}:{'color':'#999999','transform':'scale(1)'}">已取消</p>
                        <div class="contentImg" :style="fifthStyle?{'opacity':1}:{'opacity':0}"></div>
                    </div>
                </div>
            </div>
            <router-view></router-view>
        </div>
</template>

<script>
    export default {
        name:'allOrder',
        data(){
            return{
                isLoading: false,
                firstStyle:true,
                secondStyle:false,
                thirdStyle:false,
                fourthStyle:false,
                fifthStyle:false
            }
        },
        methods:{
            goBack(){
                this.$router.back()
            },
            changeStyle(loc){
                if(loc===1){
                    if(this.firstStyle===false){
                        this.$router.replace({
                            name:'allGoodsContent'
                        })
                    }
                    this.firstStyle=true
                    this.secondStyle=false
                    this.thirdStyle=false
                    this.fourthStyle=false
                    this.fifthStyle=false
                }
                else if(loc===2){
                    if(this.secondStyle===false){
                        this.$router.replace({
                            name:'waitingPay'
                        })
                    }
                    this.firstStyle=false
                    this.secondStyle=true
                    this.thirdStyle=false
                    this.fourthStyle=false
                    this.fifthStyle=false
                }
                else if(loc===3){
                    if(this.thirdStyle===false){
                        this.$router.replace({
                            name:'waitingSend'
                        })
                    }
                    this.firstStyle=false
                    this.secondStyle=false
                    this.thirdStyle=true
                    this.fourthStyle=false
                    this.fifthStyle=false
                }
                else if(loc===4){
                    if(this.fourthStyle===false){
                        this.$router.replace({
                            name:'waitingGet'
                        })
                    }
                    this.firstStyle=false
                    this.secondStyle=false
                    this.thirdStyle=false
                    this.fourthStyle=true
                    this.fifthStyle=false
                }
                else if(loc===5){
                    if(this.fifthStyle===false){
                        this.$router.replace({
                            name:'waitingComment'
                        })
                    }
                    this.firstStyle=false
                    this.secondStyle=false
                    this.thirdStyle=false
                    this.fourthStyle=false
                    this.fifthStyle=true
                }
            }
        }
    }
</script>

<style scoped>
    .allOrderContainer{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .allOrderContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left:.32rem;
        z-index: 1;
        background-color: #F6F8FA;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .other{
        width: .32rem;
        height: 0.32rem;
    }
    .allSituation{
        margin-top: 1.76rem;
        width: 100%;
    }
    .allSituationContent{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .situationContent{
        display: flex;
        flex-direction: column;
        align-items: center;
        color:#999999;
        font-family: 'PingFangSC-Mediuem';
        font-size: .28rem;
    }
    .contentTitle{
        transition: all 0.5s;
    }
    .contentImg{
        background-image: url(../assets/img/1-icon@2x/1-33confirmSport/food.png);
        width: .32rem;
        height: .05rem;
        background-position: center;
        background-size: contain;
        margin-top: 5px;
        transition: all 0.5s;
    }
</style>